<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/button.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/inputs.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/app.css"/>
<script type="text/javascript" src="<%=path%>/js/check.js"></script>

    <div id="menubar">
        <img src="<%=path%>/images/left.png" style="margin-top:auto;margin-bottom:auto;width:15px; height:15px">借阅证办理
    </div>

    <s:if test="#session.loginState == 1 && #session.isAdmin == true">
        <form name="addreader" action="<%=path%>/admin/AdminAction_addReader.action" method="post">
            <table id="inputs" width="38%"
                   style="margin: 0 auto; position: absolute;top: 100px; left: 0; bottom: 0; right: 0;overflow:auto;">

                <tr>
                    <th style="text-align:center;color:#0088cc">姓&nbsp;名：</th>
                    <td>
                        <input name="readername" type="text" placeholder="Reader name" maxlength="16" autofocus
                               required>
                    </td>
                    <td style="color: red;font-size: 16px">
                        <s:fielderror fieldName="readerNameError"/>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">密&nbsp;码：</th>
                    <td>
                        <input id="password" name="password" type="password" placeholder="Password" maxlength="12"
                               oninput="confirmPassword()" pattern="(?=^.{6,12}$).*$" title="密码长度至少6位" required>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">确认密码：</th>
                    <td>
                        <input id="rePassword" name="rePassword" type="password" placeholder="Confirm Password"
                               oninput="confirmPassword()" maxlength="12" required>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">性&nbsp;别：</th>
                    <td>
                        <select name="sex" id="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">出生日期：</th>
                    <td>
                        <input type="date" name="birthday" id="birthday" value="1990-01-01" required>
                    </td>
                    <script>
                        var date = new Date();
                        var dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                        document.getElementById("birthday").setAttribute("max", dateString);
                    </script>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">电&nbsp;话：</th>
                    <td>
                        <input type="text" name="phone" placeholder="Phone" maxlength="8"
                               pattern="[0-9]{8}" title="例：51681114">
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">手&nbsp;机：</th>
                    <td>
                        <input type="text" name="mobile" placeholder="Moblie" maxlength="11"
                               pattern="[0-9]{11}" title="例：18813092670">
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">证件类型：</th>
                    <td>
                        <select name="cardname" id="cardname" oninput="checkCardID()">
                            <option value="身份证">身份证</option>
                            <option value="学生证">学生证</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">证件号码：</th>
                    <td>
                        <input type="text" id="cardid" name="cardid" placeholder="Card ID" maxlength="20"
                               oninput="checkCardID()" required>
                    </td>
                </tr>

                <tr>
                    <th style="text-align:center;color:#0088cc">会员级别：</th>
                    <td>
                        <select name="level">
                            <option value="普通">普通</option>
                            <option value="银卡">银卡</option>
                            <option value="金卡">金卡</option>
                        </select>
                    </td>
                </tr>
            </table>

            <table width="10%"
                   style="margin: 0 auto; position: absolute;top: 800px; left: 0; bottom: 0; right: 0;overflow:auto;text-align: center">
                <tr>
                    <td>
                        <input type="submit" class="button" value="添加"/>
                    </td>
                </tr>
            </table>
        </form>
    </s:if>

    <s:else>
        <table width="100%" style="margin-top:50px;">
            <tr>
                <td>
                    <h2  style="text-align: center">请使用管理员账号登录！</h2>
                </td>
            </tr>
        </table>
    </s:else>
</html>
